<!--  -->
<template>
    <a-spin :spinning="loading">
        <a-row>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
                <titleLine title="账户信息"></titleLine>
                <a-card :bordered="false">
                    <a-form-model ref="ruleForm" :model="model" :rules="rules" :label-col="labelCol"
                        :wrapper-col="wrapperCol">
                        <a-form-model-item label="用户名" ref="username" prop="username">
                            <a-input placeholder="请输入用户名" allowClear v-model="model.username" />
                        </a-form-model-item>
                        <a-form-model-item label="昵称" ref="nickname" prop="nickname">
                            <a-input placeholder="请输入昵称" allowClear v-model="model.nickname" />
                        </a-form-model-item>
                        <a-form-model-item label="手机号" ref="phone" prop="phone">
                            <a-input placeholder="请输入手机号" allowClear v-model="model.phone" />
                        </a-form-model-item>
                        <a-form-model-item label="电子邮箱" ref="email" prop="email">
                            <a-input placeholder="请输入电子邮箱" allowClear v-model="model.email" />
                        </a-form-model-item>
                        <a-form-model-item label="头像" ref="avatarUrl" prop="avatarUrl">
                            <a-image-single v-model="model.avatarUrl" />
                        </a-form-model-item>
                        <a-form-model-item label="角色" ref="roleDtoList" prop="roleDtoList">
                            <a-tag color="red" v-if="!model.roleDtoList || !model.roleDtoList[0]">root</a-tag>
                            <a-tag color="red" v-for="(v, i) in model.roleDtoList" :key="i">
                                {{ v.roleName }}
                            </a-tag>
                        </a-form-model-item>
                        <a-form-model-item :wrapper-col="okCol">
                            <a-button type="primary" @click="submitForm('ruleForm')">
                                保 存 信 息
                            </a-button>
                            <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
                                重 置
                            </a-button>
                        </a-form-model-item>
                    </a-form-model>
                </a-card>
            </a-col>
            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
                <titleLine title="密码信息"></titleLine>
                <a-card :bordered="false">
                    <a-form-model ref="ruleForm2" :model="model" :rules="rules" :label-col="labelCol"
                        :wrapper-col="wrapperCol">
                        <a-form-model-item label="旧密码" ref="oldPassword" prop="oldPassword">
                            <a-input-password placeholder="请输入旧密码" allowClear v-model="model.oldPassword" />
                        </a-form-model-item>
                        <a-form-model-item label="新密码" ref="newPassword" prop="newPassword">
                            <a-input-password placeholder="请输入新密码" allowClear v-model="model.newPassword" />
                        </a-form-model-item>
                        <a-form-model-item label="确认密码" ref="confirmPassword" prop="confirmPassword">
                            <a-input-password placeholder="请输入确认密码" allowClear v-model="model.confirmPassword" />
                        </a-form-model-item>
                        <a-form-model-item :wrapper-col="okCol">
                            <a-button type="primary" @click="submitForm('ruleForm2')">
                                保 存 密 码
                            </a-button>
                            <a-button style="margin-left: 10px" @click="resetForm('ruleForm2')">
                                重 置
                            </a-button>
                        </a-form-model-item>
                    </a-form-model>
                </a-card>
            </a-col>
        </a-row>

    </a-spin>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { model, rules } from './save'
import * as AesUtil from '@/utils/AesUtil'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Personal",
    //import引入的组件需要注入到对象中才能使用
    components: {  },
    data() {
        //这里存放数据
        return {
            api: {
                detail: '/admin_server/auth/user/getUserInfo',
                currentUpdate: "/admin_server/auth/user/currentUpdate",
                updatePassWord: "/admin_server/auth/user/updatePassWord",
                rsaPublicKey: "/admin_server/oauth/rsaPublicKey", // rsa公钥获取接口
            },
            model,
            rules,
            labelCol: { span: 5 },
            wrapperCol: { span: 10 },
            loading: false,
            okCol: { span: 14, offset: 5 }
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        init() {
            this.$request.get1(this.api.detail).then((x) => {
                if (x.code === 200) {
                    this.model.avatarUrl = x.result.avatarUrl
                    this.model.id = x.result.id
                    this.model.email = x.result.email
                    this.model.phone = x.result.phone
                    this.model.username = x.result.username
                    this.model.roleDtoList = x.result.roleDtoList
                    this.model.nickname = x.result.nickname
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (formName === 'ruleForm') {
                        this.loading = true
                        this.$request.post2(this.api.currentUpdate, this.model).then(x => {
                            if (x.code === 200) {
                                this.$message.success("保存信息成功")
                                this.init()
                            }
                            this.loading = false
                        })
                    }
                    if (formName === 'ruleForm2') {
                        if (this.model.oldPassword === this.model.newPassword) {
                            this.$message.warning('新旧密码不能相同')
                            return
                        }
                        if (this.model.confirmPassword !== this.model.newPassword) {
                            this.$message.warning('确认密码有误')
                            return
                        }
                        this.loading = true
                        let newPassword = this.model.newPassword
                        let oldPassword = this.model.oldPassword
                        let confirmPassword = this.model.confirmPassword
                        // 加密传输
                        let aeskey = AesUtil.createAesKey()
                        this.model.oldPassword = AesUtil.AESEncrypt(this.model.oldPassword, aeskey)
                        this.model.newPassword = AesUtil.AESEncrypt(this.model.newPassword, aeskey)
                        this.model.confirmPassword = AesUtil.AESEncrypt(this.model.confirmPassword, aeskey)
                        this.$request.get1(this.api.rsaPublicKey).then(x => {
                            if (x.code === 200) {
                                this.model.encryptKey = AesUtil.RSAEncrypt(
                                    aeskey,
                                    x.result
                                )
                                this.$request.post2(this.api.updatePassWord, this.model).then(x => {
                                    if (x.code === 200) {
                                        this.$message.success("保存密码成功")
                                    }
                                    this.model.newPassword = newPassword
                                    this.model.oldPassword = oldPassword
                                    this.model.confirmPassword = confirmPassword
                                    this.loading = false
                                }).catch(() => {
                                    this.model.newPassword = newPassword
                                    this.model.oldPassword = oldPassword
                                    this.model.confirmPassword = confirmPassword
                                })
                            }
                        })
                    }
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.init()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style></style>